---
layout: default
---
<script type="text/javascript">
$(function(){

   // default
   $("#test-1").multiselect({
      header: ['checkAll','uncheckAll']
   });

   // off
   $("#test-2").multiselect({
      header: false
   });

   // custom text
   $("#test-3").multiselect({
      header: "Choose options below"
   });

});
</script>

<h2>Headers</h2>
<p>The header option can be used in three ways:</p>

<form>
   <h3><code>header: ['checkAll','uncheckAll']</code> (default)</h3>
   <select id="test-1" multiple="multiple" size="5">
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
   <option value="option4">Option 4</option>
   <option value="option5">Option 5</option>
   <option value="option6">Option 6</option>
   <option value="option7">Option 7</option>
   </select>

   <h3><code>header: false</code></h3>
   <select id="test-2" multiple="multiple" size="5">
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
   <option value="option4">Option 4</option>
   <option value="option5">Option 5</option>
   <option value="option6">Option 6</option>
   <option value="option7">Option 7</option>
   </select>

   <h3><code>header: "Choose options below"</code></h3>
   <select id="test-3" multiple="multiple" size="5">
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
   <option value="option4">Option 4</option>
   <option value="option5">Option 5</option>
   <option value="option6">Option 6</option>
   <option value="option7">Option 7</option>
   </select>
</form>
